<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>
<div id="app" v-cloak >
    <div class="main" v-loading="loading">
        <el-form ref="form" :model="form" label-width="120px" style="width: 400px;">
            <el-form-item prop="username" label="用户名：">
                {{form.username}}
            </el-form-item>
            <el-form-item label="密码：">
                <el-input v-model="form.password" placeholder="请输入密码，不修改勿填"></el-input>
            </el-form-item>
            <el-form-item label="头像：">
                <el-upload
                        class="avatar-uploader"
                        action="__URL__/host/admin/upload_pic"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                    <img v-if="form.pic" :src="form.pic" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="onSubmit('form')">点击提交</el-button>
            </el-form-item>
        </el-form>
    </div>

</div>

<script>
    new Vue({
        el: '#app',
        data(){
            return {
                loading:false,
                form:{!$data|raw!},
            }
        },
        methods: {
            onSubmit(formName) {
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        axios.post('__URL__/host/admin/save_account_center.html',this.form).then(function (res){
                            that.loading = false;
                            let data = res.data;
                            if(data.res==false){
                                that.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }else{
                                that.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                            }
                        }).catch(function(error){
                            that.loading = false;
                            console.log(error);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleAvatarSuccess(res, file) {
                if(res.res==false)
                {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }else{
                    this.form.pic = '__URL__/'+res.url;
                    this.form.update_pic = res.url;
                }
            },
        },
    });
</script>